<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <title>IndyCARE - Robot Detail</title>
    <!-- Style -->
    <link rel="shortcut icon" href="../static/img/indycare_favicon.ico"/>
    <link rel="stylesheet" href="../static/css/style.css"/>
    <!-- Jquery -->
    <script src="../static/js/libs/jquery.min.js"></script>
</head>

<body>
<!-- page wrapper -->
<div id="wrapper">
    <!-- sidebar -->
    <div class="side_nav">
        <div class="brand_logo">
            <a href="/">
{#            <a href="http://indycare.neuromeka.com">#}
                <img src="../static/img/img-logo.svg" alt="indycare_logo"/>
                <div>
                    <img src="../static/img/logo-indycare.svg" alt="indycare_text_logo"/>
                </div>
            </a>
        </div>
        <div>
            <div class="user_info">
                <img src="../static/img/img_profile.svg" alt="profile_img"/>
                <div class="user_name">
                    <span>admin</span>
                </div>
                <div class="user_roll">
                    <span>admin</span>
                </div>
                <div class="profile_menu">
                    <a href="/">
                        <img src="../static/img/icon-dropdown-menu.svg" alt="dropdown_menu"/>
                    </a>
                </div>
            </div>

            <nav class="nav_menu">
                <ul class="sub_menu">
                    <li class="sub" hidden>
                        <a href="/">
                            <img src="../static/img/icon-user.svg" alt="icon_User"/>
                            <span>User</span>
                        </a>
                        <ul>
                            <li>
                                <a href="/">User<br/>List</a>
                            </li>
                            <li>
                                <a href="/">User<br/>Register</a>
                            </li>
                        </ul>
                    </li>
                    <li class="sub">
                        <a href="/">
                            <img src="../static/img/icon-company.svg" alt="icon_Company"/>
                            <span>Robots</span>
                        </a>
                        <ul hidden>
                            <li>
                                <a href="/">Company<br/>List</a>
                            </li>
                            <li>
                                <a href="/">Company<br/>Register</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <div class="side_footer">
                <a href="/">
{#                <a href="https://www.neuromeka.com" target="_blank">#}
                    <img src="../static/img/neuromeka.svg" alt="neuromeka_homepage_logo"/>
                    <span>HOME</span>
                </a>
            </div>
        </div>
    </div>
    <!-- //sidebar -->

    <!-- content_wrap -->
    <div class="contents_wrap clear">
        <!-- header_wrap -->
        <div class="header_wrap">
            <!-- header_top -->
            <div class="header_top">
                <div class="top_menu">
                    <div class="header_toggle">
                        <img src="../static/img/icon-menu.svg" alt="_side_bar_toggle_menu"/>
                    </div>

                    <div class="item_wrap">
                        <div class="header_item">
                            <ul>
                                <li class="header_search">
                                    <label for="search">
                                        <img src="../static/img/icon_search.svg" alt="icon_search"/>
                                        <input type="text" placeholder="search for..." name="search"/>
                                        <input type="submit" class="blind"/>
                                    </label>
                                </li>
                                <li>
{#                                    <a href="http://helpdesk.neuromeka.com/projects/forum/boards" target="_blank">#}
                                    <a href="/" target="_blank">
                                        <button>문의하기</button>
                                    </a>
                                </li>
                                <li>
                                    <img src="../static/img/icon_noti.svg" alt="icon_noti"/>
                                </li>
                                <li>
                                    <img src="../static/img/icon_log_out.svg" alt="icon_log_out"/>
                                    <span>Log out</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="header_title">
                    <h1>ROBOT DETAIL</h1>
                    <div class="breadcrumb">
                        <ul>
                            <li><a href="/">HOME</a></li>
                            <li><a href="/">ROBOT LIST</a></li>
                            <li class="on"><a href="/">ROBOT DETAIL</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- //header_top -->

            <!-- tab_menu -->
            <div class="tab_menu">
                <button class="tablinks" onclick="openMenu(event, 'Robot_Information')" id="defaultOpen">
                    Robot Information
                </button>
                <button class="tablinks" onclick="openMenu(event, 'Chart_Information')">
                    Chart Information
                </button>
            </div>
            <!-- //tab_menu -->

            <!-- tab_contents -->
            <div class="tab_contents_wrap">
                <!-- tab_robot_information -->
                <div id="Robot_Information" class="tabcontent tab_contents">
                    <!-- robot info_img -->
                    <div class="robot_info">
                        <div class="robot_img">
                            <img src="../static/img/img_productF.png" alt="robot_img"/>
                            <div class="model_name">
                                <span>Indy7</span>
                                <button>
                                    <img src="../static/img/icon_server_customer.svg" alt="icon_customer"/>
                                    <span>고객사정보</span>
                                </button>
                            </div>
                            <div class="snnumber"></div>
                        </div>
                    </div>
                    <!-- //robot info_img -->

                    <!-- robot_state -->
                    <div class="robot_state">
                        <div class="robot_state_info">
                            <h3>Robot State</h3>
                            <div class="robot_state_noti">
                                <ul>
                                    <li id="busy_li"></li>
                                    <li id="ready_li"></li>
                                    <li id="collision_li"></li>
                                    <li id="error_li"></li>
                                    <li id="program_state_li"></li>
                                    <li id="emergency_li"></li>
                                    <li id="report_connected_li"></li>
                                    <li id="server_connected_li"></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- //robot_state -->

                    <!-- robot_event_section -->
                    <div class="event_section">
                        <div class="event_view">
                            <div class="section_title">
                                <img src="../static/img/icon-dashcam.svg" alt="icon_dashcam"/>
                                <div id="clip_msg"></div>
                                <h3>Workplace View</h3>
                            </div>
                            <div class="time">
                                <img src="../static/img/icon-time.svg" alt="icon_time"/>
                            </div>
                            <video id="clip" width="350" height="280" controls loop muted autoplay></video>
                        </div>

                        <div class="event_history">
                            <div class="section_title">
                                <img src="../static/img/icon-history.svg" alt="icon_event_history"/>
                                <h3>Event History</h3>
                                <div class="more">
                                    <button id="history_Btn">
                                        <span>더보기</span>
                                        <img src="../static/img/icon_more.svg" alt="icon_more"/>
                                    </button>
                                    <!-- The Modal -->
                                    <div id="history_Modal" class="more_modal">
                                        <!-- Modal content -->
                                        <div class="modal-content">
                                            <span class="close">&times;</span>
                                            <div class="history_table">
                                                <h2>All Event History</h2>
                                                <!-- Data Table For Modal -->
                                                <table id="dataTable_history" class="">
                                                    <thead>
                                                    <tr>
                                                        <th>DATE</th>
                                                        <th>EVENT</th>
                                                        <th>LOG</th>
                                                    </tr>
                                                    </thead>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <!-- Data Table For Modal -->
                                <table id="dataTable" class="">
                                    <thead>
                                    <tr>
                                        <th>DATE</th>
                                        <th>EVENT</th>
                                        <th>LOG</th>
                                    </tr>
                                    </thead>
                                </table>
                                <script type="text/javascript">
                                </script>
                            </div>
                        </div>
                    </div>
                    <!-- //robot_event_section -->
                    <div class="robot_chart">
                        <div class="chart_section">
                            <h3>WorK Count [CNT]</h3>
                            <div class="chart_cnt">
                                <canvas id="myCountChart"></canvas>
                            </div>
                        </div>

                        <diV class="chart_section">
                            <h3>Temperature [TMP]</h3>
                            <div class="chart_tmp">
                                <canvas id="myTempChart"></canvas>
                            </div>
                        </diV>
                    </div>
                </div>
                <!-- //tab_robot_information -->

                <!-- tab_chart_information -->
                {#<div id="Chart_Information" class="tabcontent">
                    <div class="opdata_card"
                         style="display: block; margin-bottom: 50px; height: 400px; background-color: white">
                        <div style="display: inline-block;">
                            <h3>Work Count</h3>
                            <div>
                                <canvas id='myCountChart_second'></canvas>
                            </div>
                        </div>
                        <div style="display: inline-block;">
                            <h3>Temperature</h3>
                            <div>
                                <canvas id="myTempChart_second"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="opdata_card_second"
                         style="display: block; margin-bottom: 50px; height: 400px; background-color: white">
                        <div style="display: inline-block; float: left;">
                            <h3>Analog I/O</h3>
                            <div style="width: 550px; height: 350px;">
                                <canvas id="myAnalog"></canvas>
                            </div>
                        </div>
                        <div style="display: inline-block; float: left;">
                            <h3>Analog I/O</h3>
                            <div style="width: 550px; height: 350px;">
                                <canvas id="myAnalog_second"></canvas>
                            </div>
                        </div>
                        <div style="display: inline-block; float: left;">
                            <h3>Analog I/O</h3>
                            <div style="width: 550px; height: 350px;">
                                <canvas id="myAnalog_third"></canvas>
                            </div>
                        </div>
                    </div>
                </div>#}
                <div id="Chart_Information" class="tabcontent">
                    <div class="chart_info">
                        <div class="chart_cnt">
                            <h3>Work Count[CNT]</h3>
                            <div class="chart_cnt_canvas">
                                <canvas id="myCountChart_second"></canvas>
                            </div>
                        </div>
                        <div class="chart_tmp">
                            <h3>Temperature[TMP]</h3>
                            <div class="chart_tmp_canvas">
                                <canvas id="myTempChart_second"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="chart_info_an">
                        <div class="chart_an_1">
                            <h3>Analog I/O</h3>
{#                            <div class="chart_an_1_canvas">#}
                            <div style="width: 300px; height: 300px">
                                <canvas id="myAnalog"></canvas>
                            </div>
                        </div>
                        <div class="chart_an_2">
                            <h3>Analog I/O</h3>
                            <div class="chart_an_2_canvas">
                                <canvas id="myAnalog_second"></canvas>
                            </div>
                        </div>
                        <div class="chart_an_3">
                            <h3>Analog I/O</h3>
                            <div class="chart_an_3_canvas">
                                <canvas id="myAnalog_third"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- //tab_chart_information -->
            </div>
            <!-- //tab_contents -->
        </div>
        <!-- //header_wrap -->
    </div>
    <!-- //content_wrap -->
</div>
<!-- // page wrapper -->
<!-- Plugin -->
<script src="../static/js/libs/moment.js"></script>
<script src="../static/js/libs/datatables.js"></script>
<script src="../static/js/libs/Chart.js"></script>
<!-- Custom JavaScript -->
<script src="../static/js/tab_nav.js"></script>
<script src="../static/js/video.js"></script>
<script src="../static/js/more_modal.js"></script>
<script src="../static/js/robot_state.js"></script>
<script src="../static/js/myFunction.js"></script>
<script src="../static/js/event_listener.js"></script>
<script src="../static/js/chart_cfg.js"></script>
<script>
    $(document).ready(() => {
        const param = new URLSearchParams(document.location.search);
        const sn = param.get('sn');
        console.log(sn);
        $(".snnumber").append("<span> SerialNumber :  " + sn + "<span>");
        let kpi = get_kpi(sn);
        console.log(kpi);

        current_date();                 // 현재 날짜 Ajax

        create_chart_from_kpi(sn, kpi); // 차트 Ajax
        load_clip(sn);                  // Clip Ajax
        update_robot_state(sn);         // 로봇 상태 값 Ajax
        data_table_for_history(sn);     // 더보기 데이터 테이블 Ajax
        data_table(sn);                 // 메인 화면 데이터 테이블 Ajax
        event_listener(sn);             // 이벤트 리스너

        setInterval(() => {
            load_clip(sn);              // Clip 업데이트 용
            refresh_chart_from_kpi(sn, kpi);   // 차트 업데이트 용
        }, 30000);

        setInterval(() => {
            update_robot_state(sn);     // 로봇 상태 업데이트
        }, 10000);
    });

    // "javascript:history.back()"

</script>
</body>
</html>
